
<template>
  <view class="search-page">
    <!-- 搜索框 -->
    <view class="search-bar-container">
      <view class="search-bar-child">
        <view class="search-icon">🔍</view>
        <input 
          type="text" 
          v-model="searchQuery" 
          @input="onSearch" 
          placeholder="条码/货号/名称" 
          class="custom-search-input"
        />
      </view>
    </view>
    <!-- 商品列表 -->
    <scroll-view scroll-y class="product-list" v-if="filteredProducts.length > 0">
      <view v-for="(product, index) in filteredProducts" :key="index" class="product-item">
        <image :src="product.productImageUrl" class="product-image"></image>
        <view class="product-info">
          <text class="product-name">{{ product.productName }}</text>
          <text class="product-code">条形码：{{ product.barcode }}</text>
          <text class="product-price">¥{{ product.retailPrice }}</text>
          <text class="product-stock">库存：{{ product.stockquantity }}</text>
        </view>
        <!-- 添加按钮 -->
        <view class="add-button" @click="addToCart(product)">
          <text>+</text>
        </view>
      </view>
    </scroll-view>
    <!-- 可选：添加“无结果”提示 -->
    <view v-else-if="searchQuery" class="empty-tips">
      <text>未找到有关 [{{ searchQuery }}] 的商品</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onBeforeMount } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import store from '../../store';

const searchQuery = ref('');
const filteredProducts = ref([]);

// 获取URL参数中的条形码并设置searchQuery
onLoad((options) => {
  if (options && options.barcode) {
    const barcode = decodeURIComponent(options.barcode);
    console.log('Received barcode:', barcode);
    searchQuery.value = barcode;
    fetchProducts(barcode);
  }
});

async function fetchProducts(query) {
  uni.request({
    url: `http://localhost:15000/PRODUCT-SERVICE/product/searchThree?query=${encodeURIComponent(query)}`,
    method: 'GET',
    success: (res) => {
      // 假设返回的数据结构直接为商品列表
      filteredProducts.value = res.data;
    },
    fail: () => {
      console.error('请求失败');
    }
  });
}

function onSearch() {
  if (searchQuery.value) {
    fetchProducts(searchQuery.value);
  } else {
    filteredProducts.value = [];
  }
}

// 添加到购物车（这里仅作示例，实际应用中应实现相应的逻辑）
function addToCart(product) {
  const newItem = {
      productId: product.productId,
      productName: product.productName,
      retailPrice: product.retailPrice,
      productImageUrl: product.productImageUrl,
      qutity: 1,
      barcode: product.barcode
    };
	console.log("newItem",newItem)
    // 分发 action 到 Vuex store 来更新 products
    store.dispatch('addProduct', newItem);
}
</script>

<style scoped>
	body{
		background-color: #f3f4f6;
	}
.search-page {
  /* padding: 10px; */
  background-color: #f2f2f2;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.product-list {
	width: 100%;
  height: calc(100vh - 120px); /* 考虑到顶部和底部的空间 */
}

.product-item {
  display: flex;
  align-items: center;
  margin: 12px;
  border-radius: 15px;
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px; /* 新增：每个商品项下方留出10px的间距 */
}

.product-image {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.product-name {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.product-code {
  font-size: 14px;
  color: #666;
}

.product-price {
  font-size: 18px;
  color: #007aff;
}

.product-stock {
  font-size: 14px;
  color: #666;
  margin-top: auto; /* 将库存信息放在底部 */
}

.add-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #007aff;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%; /* 圆形按钮 */
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
}

.add-button:hover {
  background-color: #005bb5;
}
.empty-tips{
	margin-top: 20px;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
}

/* 自定义搜索输入框样式 */
.search-bar-container {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 10px;
  border-bottom: 1px solid #e6e6e6;
}
.search-bar-child{
	display: flex;
	background-color: #f2f2f2;
	padding: 10px;
	border-radius: 10px;
	width: 100%;
}
.search-icon {
  margin-right: 10px;
  color: gray;
}

.custom-search-input {
  flex: 1;
  border: none;
  outline: none;
  background-color: transparent;
  font-size: 16px;
}
</style>